import "./App.scss"
import { lazy, Suspense } from "react"
import Home from "./page/Home"
import Login from "./page/Login"
import { ConfigProvider, Spin } from "antd"
import { AuthRoute } from "./components/AuthRoute"
import { BrowserRouter, Route, Routes, Navigate } from "react-router-dom"
const Data = lazy(() => import("./page/Home/Data"))
const Content = lazy(() => import("./page/Home/Content"))
const Article = lazy(() => import("./page/Home/Article"))
function App() {
  return (
    <ConfigProvider>
      <BrowserRouter>
        <Suspense
          fallback={
            <div className="loading">
              <div className="loading">
                <Spin tip="加载中..." />
              </div>
            </div>
          }
        >
          <Routes>
            <Route path="/" element={<Navigate to="/home" />}></Route>
            <Route
              path="/home"
              element={
                <AuthRoute>
                  <Home />
                </AuthRoute>
              }
            >
              <Route path="" element={<Data />}></Route>
              <Route path="content" element={<Content />}></Route>
              <Route path="article" element={<Article />}></Route>
            </Route>
            <Route path="/login" element={<Login />}></Route>
          </Routes>
        </Suspense>
      </BrowserRouter>
    </ConfigProvider>
  )
}

export default App
